<template>
	 <view class="">
		<view style="text-align: center;padding: 40rpx 0 20rpx 0;font-weight: bold;">
			选择服务时间
		</view>
		
		<view>
			<u-tabs @change="Ctabs" active-color="#00C08D" :list="tabs" :is-scroll="false" :current="current"></u-tabs>
		</view>
		
		
		<view class="u-flex u-flex-wrap u-row-between u-padding-20">
			<view @click="selectTime(item)" class="timeBlock" v-for="(item,index) in list " :key="index">
				<view :class="item.is_selected?'ban':''">{{item.time}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			info:{
				type:Object,
				default:()=>{
					
				}
			}
		},
		watch:{
			current:{
				immediate:true,
				handler(v){
					let txt=this.tabs[v].txt;
					this.list=this.info[txt];
				}
			}
		},
		data(){
			return{
				tabs:[{
					name:"今天",
					txt:"today"
				},{
					name:"明天",
					txt:"tomorrow"
				},{
					name:"后天",
					txt:"day_after_tomorrow"
				}],
				current:0,
				
				list:[]
			}
		},
		methods:{
			Ctabs(e){
				this.current=e;
			},
			selectTime(e){
				if(e.is_selected)return
				this.$emit("selectTime",e);
			}
		}
	}
</script>

<style>
	.timeBlock{
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin:10rpx;
	    border: 1rpx solid #e1e1e1;
		color: #666;
	}
	.ban{
		background: #E1E1E1;
		color: #fff;
	}
</style>
